import React from 'react'
import { useState, useEffect } from 'react'
// import lunbo from "../images/lunbo1.jpg"
import "./MySwipe.scss"
import { withRouter } from 'react-router-dom'
import { swipe } from '../utils/api'
import { Swiper } from 'antd-mobile'

function MySwipe() {
  let [img, setimg] = useState({ arr: [] })

  useEffect(() => {
    swipe().then((ok) => {
      console.log(ok.data.list)
      setimg({ ...img, arr: ok.data.list })
    })
  }, [])

  const colors = img.arr

  const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div
        // className={styles.content}
        style={{ background: color }}
      // onClick={() => {
      //   Toast.show(`你点击了卡片 ${index + 1}`)
      // }}
      >
        <img src={color.pic} alt="" />

      </div>
    </Swiper.Item>
  ))

  return (
    <div className='swipe'>
      {/* <img src={img.arr[0].pic} alt="" /> */}

      <Swiper autoplay loop="true">{items}</Swiper>

    </div>
  )
}
export default withRouter(MySwipe)